import React from "react";
import { BrowserRouter } from 'react-router-dom'
import routes, { makeNavLinks, makeRoutes } from './routes'
import { Switch } from 'react-router-dom'
class Index extends React.Component {
  state={ 
    list:[
      '豆瓣', '读书' ,'电影' ,'音乐', '同城' ,'小组', '阅读' ,'FM' ,'时间' ,'豆品'
    ]
  }
  render() { 
    return ( 
      <div className="box">
        <ul className="top-nav">
        {this.state.list.map((item,index)=>(
          <li key={index}>
            <a href="#">{item}</a>
            </li>
        ))}
                </ul>
     <div className="nav">
        <div className="nav-wrap">
         <span><a href="#">豆瓣电影</a></span>
    
         <form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" className="form-control"  placeholder="搜索电影、 电视剧、 综艺、 艺人"/>
  </div>
  <button type="submit"  class="btn btn-default">
    {/* <i class="fa fa-search"></i> */}
  </button>
</form>
        </div>
        <div className="logo">
          <img src="https://img3.doubanio.com/dae/accounts/resources/3e96b44/movie/assets/annual_2021.png" alt=""/>
        </div>
        <div className="nav-router">
          <BrowserRouter>
          {/* <div className="movie-nav"> */}
            <div>
            {makeNavLinks(routes)}

            {/* </div> */}
         
          </div>
          <div>            <Switch>{makeRoutes(routes)}</Switch></div>
          </BrowserRouter>
        </div>
     </div>
      </div>
     );
  }
}
 
export default Index;